<template>
  <div class="store-container">
    <!-- 搜索框 -->
    <div class="search-wrapper">
      <label name="searchQuery">搜索商品：</label>
      <el-input
        v-model="searchQuery"
        prefix-icon="el-icon-search"
        placeholder="搜索商品"
        clearable
        style="width: 300px"
      ></el-input>
    </div>

    <!-- 标题区 -->
    <div class="header">
      <h1 class="title">精选商品</h1>
      <el-divider class="divider"></el-divider>
    </div>

    <!-- 商品列表 -->
    <el-row :gutter="20" class="goods-list">
      <el-col
        v-for="(goods, index) in filteredGoodsList"
        :key="goods.product_id + index"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
      >
        <el-card
          class="goods-card"
          :body-style="{ padding: '0px' }"
          shadow="hover"
        >
          <div class="card-content" @click="goToDetail(goods.product_id)">
            <el-image :src="goods.img" class="goods-image" fit="cover" lazy>
              <div slot="placeholder" class="image-placeholder">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>

            <div class="goods-info">
              <h3 class="goods-title">{{ goods.product_name }}</h3>
              <div class="meta-line">
                <span class="supplier">
                  <i class="el-icon-user"></i>
                  {{ getSupplierName(goods.supplier_id) }}
                </span>
                <el-tag type="danger" class="price-tag">
                  ￥{{ goods.price }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="filteredGoodsList.length"
        :current-page="currentPage"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import { mapState } from "vuex";

export default {
  name: "StoreView",
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 4, // 每页显示的商品数量
      searchQuery: "", // 搜索查询
    };
  },
  computed: {
    filteredGoodsList() {
      // 根据搜索查询过滤商品列表
      return this.goodsList.filter((goods) =>
        goods.product_name
          .toLowerCase()
          .includes(this.searchQuery.toLowerCase())
      );
    },
    paginatedGoodsList() {
      const start = (this.currentPage - 1) * this.pageSize; // 计算起始索引
      return this.filteredGoodsList.slice(start, start + this.pageSize); // 切割过滤后的商品列表
    },
    // ...mapState({
    //   goodsList: (state) => state.goods.goodsList, // 从 Vuex 中获取商品列表
    //   suppliers: (state) => state.supplier.supplierList, // 从 Vuex 中获取供应商列表
    // }),
    goodsList() {
      return (
        this.$store.state.goods.goodsList ||
        JSON.parse(localStorage.getItem("vuex-goods"))
      );
    },
    suppliers() {
      return (
        this.$store.state.supplier.supplierList ||
        JSON.parse(localStorage.getItem("vuex-suppliers"))
      );
    },
  },
  methods: {
    getSupplierName(supplierId) {
      const supplier = this.suppliers.find((s) => s.id === supplierId);
      return supplier ? supplier.username : "未知供应商"; // 返回供应商名称或默认值
    },
    goToDetail(productId) {
      this.$router.push("/product/" + productId); // 跳转到商品详细页
    },
    handlePageChange(page) {
      this.currentPage = page; // 更新当前页码
    },
  },
  created() {
    this.$store.dispatch("goods/getGoodsList"); // 获取商品列表
    this.$store.dispatch("supplier/loadSupplierList"); // 获取供应商列表
  },
};
</script>

<style scoped>
.store-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 2.5rem;
  color: #2c3e50;
  letter-spacing: 2px;
}

.divider {
  background-color: #409eff;
  width: 60px;
  margin: 20px auto;
}

.goods-list {
  margin-bottom: 30px;
}

.goods-card {
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.goods-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.goods-image {
  width: 100%;
  height: 250px;
  border-radius: 8px 8px 0 0;
}

.image-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

.goods-info {
  padding: 15px;
}

.goods-title {
  font-size: 1.1rem;
  color: #303133;
  margin-bottom: 10px;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.meta-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.supplier {
  color: #606266;
  font-size: 0.9rem;
}

.price-tag {
  font-size: 1.1rem;
  padding: 5px 10px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.el-card {
  cursor: pointer;
}

.search-wrapper {
  margin-bottom: 20px; /* 搜索框与其他内容的间距 */
}
</style>
